<template>
	<view>
		<view class="header">
			<view class="title">小程序商户</view>
			<view class="container">
				<navigator class="left">
					<view class='cu-avatar xl radius' style="height: 84upx;margin-bottom: 30upx;">
						99
						<view class="cu-tag badge">99+</view>
					</view>
					<view>待发货订单</view>
				</navigator>
				<navigator class="right">
					<view class="nub">5</view>
					<view>待处理售后</view>
				</navigator>
			</view>
		</view>
		
		<!-- 广告跑马灯区域 -->
		<banner-notice class="banner-notice" :isText="banerText"></banner-notice>

		<view class="tabBar">
			<navigator url="/pages/orderList/orderList" class="tabBar-box">
				<image src="../../static/img/index-img/chaxun.png" mode="aspectFit"></image>
				<text class="menu-text">查询订单</text>
			</navigator>
			<navigator url="/pages/saomiao/saomiao" class="tabBar-box">
				<image src="../../static/img/index-img/saomiao.png" mode="aspectFit"></image>
				<text class="menu-text">核销验证</text>
			</navigator>
			<navigator url="/pages/orderXin/orderXin" class="tabBar-box">
				<image src="../../static/img/index-img/median.png" mode="aspectFit"></image>
				<text class="menu-text">门店</text>
			</navigator>
			<navigator url="/pages/tabs/tabs" class="tabBar-box">
				<image src="../../static/img/index-img/huiyuan.png" mode="aspectFit"></image>
				<text class="menu-text">会员</text>
			</navigator>
			<navigator url="" class="tabBar-box">
				<image src="../../static/img/index-img/shoukuan.png"></image>
				<text class="menu-text">收款记录</text>
			</navigator>
			<navigator url="" class="tabBar-box">
				<image src="../../static/img/index-img/caiwu.png" mode="aspectFit"></image>
				<text class="menu-text">财务管理</text>
			</navigator>
			<navigator url="" class="tabBar-box">
				<image src="../../static/img/index-img/baobiao.png" mode="aspectFit"></image>
				<text class="menu-text">经营报表</text>
			</navigator>
			<navigator url="" class="tabBar-box">
				<image src="../../static/img/index-img/zhangfang.png" mode="aspectFit"></image>
				<text class="menu-text">账房</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	import bannerNotice from '@/components/banner-notice/banner-notice.vue'
	export default {
		data() {
			return {
				banerText:'小程序商户现已上线'
			};
		},
		methods: {
			
		},
		components: {
			bannerNotice
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100vw;
		height: 30vh;
		background-color: $global-bgc;
		color: #fff;
		letter-spacing: 2upx;
	}

	.title {
		font-size: $font32;
		padding: 69upx 0 0 37upx;
	}

	.container {
		display: flex;
		justify-content: space-around;
		font-size: $font24;
		margin-top: 60upx;
	}

	.cu-tag {
		top: 0upx;
		right: -42upx;
		font-size: 25upx;
	}

	.left,
	.right {
		padding: 40upx 70upx;
	}

	.nub {
		font-size: $font65;
		text-align: center;
		margin-bottom: 30upx;
	}

	// .msg {
	// 	position: absolute;
	// 	top: 15upx;
	// 	left: 175upx;
	// 	padding: 5upx 8upx 5upx 8upx;
	// 	font-size: $font26;
	// 	text-align: center;
	// 	letter-spacing: 0upx;
	// 	background-color: red;
	// 	border-radius: 40%;
	// }
	.banner-notice{
		width: 70%;
	}
	.tabBar {
		height: 61vh;
		display: flex;
		flex-wrap: wrap;
	}

	.tabBar-box image {
		width: 72upx;
		height: 69upx;
		margin-bottom: 27upx;
		margin-left: 90upx;
	}

	.menu-text {
		font-size: $font28;
		letter-spacing: 2upx;
	}

	.tabBar-box {
		width: 250upx;
		height: 274upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

</style>
